<template>
    <div class="connn">

        <Content  >
           
            <template v-slot:one>
                <h1 >mv排行</h1>
                <h2 >更多</h2>
            </template>
            
            <template v-slot:two>
                <ul >
                    <li v-for="(item,index) in mv" :key="index">{{ item }}</li>
                </ul>
                <img  :src="img" alt="">
            </template>
        </Content>

        <Content >
            <h1>电影排行</h1>
            <ul>
                <li v-for="(item,index) in movie" :key="index">{{ item }}</li>
            </ul>
        </Content>
        <Content  >
            <h1>游戏排行</h1>
            <img :src="img" alt="">
            <ul>
                <li v-for="(item,index) in game" :key="index">{{ item }}</li>
            </ul>
        </Content>

    
    </div>
</template>

<script>
import Content from './Content.vue';
    export default {
        name:"SlotVue",
        components:{
            Content
        },
        data(){
            return{
                mv:["晴天","珊瑚海","花海","夜曲"],
                movie:["龙马精神","铃芽之旅","灌篮高手","泰坦尼克号"],
                game:["英雄联盟","蛋仔派对","赛尔号","影子传说"],
                img:"https://picnew3.photophoto.cn/20081028/sanzhikeaidexiaohuamaotupian-09966070_1.jpg"
            }
        }
    }
</script>

<style scoped>
.connn{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
</style>